<template>
    <div>
       <h3>权限列表页面</h3> 
       <Breadcrumb :breadcrumba="breadcrumba" :breadcrumbb="breadcrumbb"></Breadcrumb>

       <el-card class="box-card">
           <template >
             <div class="tableBox">
                   <el-table
            :data="rightsList"
            border
            stripe
            size="mini"
            height="600"
            style="width: 100%">
                <el-table-column
                    align="center"
                    type="index"
                    label="序号"
                    width="80">
                </el-table-column>

                <el-table-column
                prop="authName"
                label="权限名称"
               >
                </el-table-column>

                <el-table-column
                    prop="path"
                    label="路径"
                    >
                </el-table-column>

                <el-table-column
                    prop="level"
                    label="权限等级"
                   >
                   <!-- 加油作用域插槽的时候加个这个 -->
                   <template slot-scope="scope">
                       <el-tag v-if="scope.row.level === '0'">一级</el-tag>
                       <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
                       <el-tag type="warning" v-else>三级</el-tag>
                   </template>
                </el-table-column>
            </el-table>
             </div>
           </template>
       </el-card>
    </div>
</template>

<script>
import Breadcrumb from "../../components/Breadcrumb"
import {getRightsList} from "../../api/rights"
    export default {
        components:{
            Breadcrumb
        },
        data(){
            return{
                breadcrumba:'',
                breadcrumbb:'',
                rightsList:[]
            }
        },
        created(){
            this.breadcrumba=sessionStorage.getItem('breadcrumba')
            this.breadcrumbb=sessionStorage.getItem('breadcrumbb')
            this.getRightsList()
        },
        methods:{
            async getRightsList(){
                let {data:res} = await getRightsList('list')
                console.log(res,"所有权限列表");
                this.rightsList= res.data
            }
        }
    }
</script>

<style scoped>
    .el-table{
        margin-top: 15px;
        font-size: 14px;
    }
    /* .tableBox{
        height: 600px;
        overflow-x: scroll;
        background: seagreens;
    } */
</style>